<template>
	<view class="order-pay">
		<scroll-view class="order-content" scroll-y>
			<view class="order-card">
				<view class="card-info">
					<view class="card-info-left">
						<view class="card-info-title">
							<text class="card-info-h1">{{ data.courseName }}</text>
							<text class="tag" v-if="data.course">{{ data.course.type === 1 ? '初训' : '复训' }}</text>
						</view>
						<view class="card-info-txt">
							<view class="iconfont icon-weikaishi1">
							</view>
							<text>上课时间：48课时 09:00-18:00</text>
						</view>
						<view class="card-info-txt">
							<view class="iconfont icon-dingwei">
							</view>
							<text>中山市企安校区</text>
						</view>
					</view>
					<text class="price">¥{{ data.totalAmount }}</text>
				</view>
				<!-- <view class="card-info">
					<view class="card-info-left">
						<view class="card-info-title">
							<text class="card-info-h1">溶化焊接预热切割作业</text>
							<text class="tag">初训</text>
						</view>
						<view class="card-info-txt">
							<view class="iconfont icon-weikaishi1">
							</view>
							<text>上课时间：48课时 09:00-18:00</text>
						</view>
						<view class="card-info-txt">
							<view class="iconfont icon-dingwei">
							</view>
							<text>中山市企安校区</text>
						</view>
					</view>
					<text class="price">¥2000</text>
				</view> -->
			</view>
			<view class="order-card" style="padding: 30rpx 30rpx 0rpx 30rpx;">
				<view class="order-card-list">
					<text class="first">订单编号：</text>
					<text>{{ data.orderId }}</text>
				</view>
				<view class="order-card-list">
					<text class="first">购买时间：</text>
					<text>{{ parseTime(data.orderDate) }}</text>
				</view>
				<view class="order-card-list">
					<text class="first">支付方式：</text>
					<text>{{ data.paymentMethod }}</text>
				</view>
				<view class="order-card-list">
					<text class="first">支付时间：</text>
					<text>{{ parseTime(data.payDate) }}</text>
				</view>
				<view class="total">
					<text style="margin-right: 8rpx;">共计1门课程，实付金额</text>
					<text style="font-size: 28rpx;color: #FD3523;font-weight: 700;">¥</text>
					<text class="num">{{ data.totalAmount }}</text>
				</view>
			</view>
			<!-- <view class="order-card">
				<view class="sale">
					<text>优惠信息</text>
					<view class="sale-txt">
						优惠:<text>暂无</text>
					</view>
				</view>
			</view> -->
			<!-- <view class="order-info">
				<text></text>
			</view> -->

			<!-- <view class="order-card">
				<view class="form-title">请填写报名信息 </view><text
					style="color: #FD3523;font-size: 24rpx;">*如信息不对请删除重新填写</text>
				<uv-form :model="formData" :rules="userRules" ref="userForm" labelWidth="160rpx" borderBottom>
					<uv-form-item label="真实姓名" prop="nickname" required>
						<uv-input v-model="formData.nickname" placeholder="请输入真实姓名" />
					</uv-form-item>
					<uv-form-item label="身份证号" prop="identity" required>
						<uv-input v-model="formData.identity" placeholder="请输入身份证号码" />
					</uv-form-item>
					<uv-form-item label="手机号码" prop="phone" required>
						<uv-input disabled v-model="formData.phone" placeholder="请输入手机号码">
						</uv-input>
					</uv-form-item>
				</uv-form>
			</view> -->

			<view style="height: 120rpx;"></view>
		</scroll-view>

		<view class="order-bottom">
			<button class="btn-pay" @click="submitForm">
				下一步，上传报名资料
			</button>
			<!-- <button class="btn-pay" @click="submitForm">
				确认无误，提交报名资料
			</button> -->
		</view>
	</view>
</template>

<script>
import { getOrderDetail, cancelOrder, orderRefund } from '@/http/order.js'
import { parseTime, isIdCard } from '@/utils/tools.js'
import { getPhoneCode, postVerifyPhone, putUserUpdate, getDetail } from '@/http/user.js'

export default {
	data() {
		return {
			orderId: '',
			data: {},
			formData: {
				nickname: '',
				identity: '',
				phone: '',
			},
			userRules: {
				nickname: {
					type: 'string',
					min: 2,
					required: true,
					message: '请输入真实姓名',
					trigger: ['blur', 'change']
				},
				identity: [{
					required: true,
					message: '请输入身份证号码',
					trigger: ['blur', 'change']
				}, {
					validator: (rule, value, callback) => {
						try {
							 isIdCard(value)
							callback()
						} catch (error) {
							callback(error.message)
						}
					},
					trigger: ['blur', 'change']
				}],
				phone: [{
					required: true,
					message: '请输入手机号码',
					trigger: ['blur', 'change']
				},{
					validator: (rule, value, callback) => {
						console.log(value);
						if(!uni.$u.mobile(value)){
							callback('请输入正确的手机号码')
						}
						callback()
					},
					trigger: ['blur', 'change']
				}],
			},
			counting: 0,
			timer: null
		}
	},
	onLoad(options) {
		this.orderId = options.orderId


	},
	onShow() {
		this.loadData()
		const userinfo = uni.getStorageSync('userinfo')
		this.formData = {
			...userinfo
		}
	},
	methods: {
		parseTime,
		loadData() {
			let params = {
				orderId: this.orderId
			}
			getOrderDetail(params).then(res => {
				this.data = res.data
			})
		},
		// 发送验证码
		async sendCode() {
			try {
				await this.$refs.userForm.validateField('phone')
				const res = await getPhoneCode({
					phone: this.formData.phone
				})

				this.counting = 60
				this.timer = setInterval(() => {
					if (this.counting > 0) {
						this.counting--
					} else {
						clearInterval(this.timer)
					}
				}, 1000)

				uni.showToast({
					title: '验证码已发送',
					icon: 'none'
				})
			} catch (err) {
				uni.showToast({
					title: err.message || '发送失败',
					icon: 'none'
				})
			}
		},

		// 提交表单
		submitForm() {
			getDetail().then(res => {
				uni.setStorageSync('userinfo', res.data)
				uni.navigateTo({
					url: '/pages/profile/profile?orderId=' + this.orderId
				})
			})
		}
	},

	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer)
		}
	}
}
</script>

<style lang="scss" scoped>
.order-pay {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #3FCEA0, #3FCFA1);
	background-size: 100% 450rpx;
	background-repeat: no-repeat;
	background-color: #F7F6F9;

	.order-content {
		flex: 1;
		height: calc(100vh - constant(safe-area-inset-bottom));
		height: calc(100vh - env(safe-area-inset-bottom));
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.order-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 15rpx 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;

		.btn-pay {
			width: 420rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #FD3523;
			border-radius: 10rpx;
			font-weight: 700;
			font-size: 30rpx;
			color: #FFFFFF;
			margin-bottom: 30rpx;
		}
	}

	// 其他样式保持不变...
}

.order-title {
	font-weight: 400;
	font-size: 36rpx;
	color: #FFFFFF;
	display: block;
	margin-bottom: 20rpx;
	margin-left: 35rpx;
}

.order-card {
	background: #FFFFFF;
	box-shadow: 0rpx 9rpx 16rpx 0rpx rgba(137, 135, 142, 0.09);
	border-radius: 10rpx;
	margin: 35rpx;
}

.card-info {
	padding: 30rpx;
	display: flex;
	border-bottom: 4rpx solid #F2F2F2FF;

	.card-info-left {
		flex: 1;

		.card-info-title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.card-info-h1 {
				font-weight: 700;
				font-size: 32rpx;
				color: #12141A;
			}

			.tag {
				margin-left: 25rpx;
				padding: 0 25rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: #FDF7F2;
				border-radius: 4rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #F47900;
			}
		}

		.card-info-txt {
			font-weight: 400;
			font-size: 26rpx;
			color: #525355;
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.iconfont {
				margin-right: 5rpx;
				color: #8e929b;
				font-size: 34rpx;
			}
		}
	}

	.price {
		font-weight: 500;
		font-size: 36rpx;
		color: #12141A;
	}
}

.sale {
	padding: 30rpx 35rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #525355;
	display: flex;
	justify-content: space-between;

	.sale-txt {
		text {
			font-weight: 700;
			font-size: 30rpx;
			color: #FD3523;
		}
	}
}

.total {
	padding: 0 35rpx 40rpx 35rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #525355;
	display: flex;
	align-items: baseline;
	justify-content: flex-end;

	.num {
		font-weight: 700;
		font-size: 46rpx;
		color: #FD3523;
	}
}

.pay-type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 35rpx;

	.title {
		font-weight: 700;
		font-size: 32rpx;
		color: #12141A;
	}

	.wechat {
		display: flex;
		align-items: center;
		font-size: 32rpx;

		.iconfont {
			font-size: 56rpx;
			color: #1cab43;
			margin-right: 10rpx;
		}
	}
}

.order-card-list {
	font-weight: 400;
	font-size: 26rpx;
	color: #12141A;
	display: flex;
	align-items: center;
	padding-bottom: 30rpx;

	// justify-content: ;
	.first {
		color: #80858F;
	}
}

.form-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #eee;
}

::v-deep .uv-form-item__body {
	padding: 10rpx 0;
}

:deep(.uv-form) {
	padding: 10rpx 20rpx;

	.uv-form-item {
		// margin-bottom: 5rpx;

		&__label {
			width: 140rpx;
			font-size: 26rpx;
			color: #666;
		}

		&__content {
			font-size: 26rpx;

			.uv-input {
				height: 70rpx;
				background: #f8f8f8;
				border-radius: 6rpx;
				padding: 0 15rpx;
			}
		}

		&__error {
			font-size: 22rpx;
			color: #ff4d4f;
			margin-top: 4rpx;
		}

		.phone-input {
			display: flex;
			align-items: center;

			.uv-input {
				flex: 1;
			}

			.send-code {
				width: 180rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 24rpx;
				color: #FD3523;
				background: #fff;
				border: 1rpx solid #FD3523;
				border-radius: 6rpx;
				margin-left: 15rpx;

				&[disabled] {
					color: #999;
					border-color: #ddd;
					background: #f5f5f5;
				}
			}
		}
	}
}
</style>